<template>
    <div class="container-xxl py-5 bg-dark page-header mb-5">
        <div class="container my-5 pt-5 pb-4">
            <h1 class="display-3 text-white mb-3 animated slideInDown"> 404 Error </h1>
            <p class="text-white fs-4">专注、迅捷、成就、分享</p>
        </div>
    </div>
    <!-- Header End -->

    <!-- 404 Start -->
    <div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container text-center">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <i class="bi bi-exclamation-triangle display-1 text-secondary"></i>
                    <h1 class="display-1">404</h1>
                    <h1 class="mb-4">Page Not Found</h1>
                    <p class="mb-4">
                        We’re sorry, the page you have looked for does not exist in our website!
                        Maybe go to our home page or try to use a search?
                    </p>
                    <router-link to="/" class="btn btn-secondary py-3 px-5"
                        >Go Back To Home</router-link
                    >
                </div>
            </div>
        </div>
    </div>
    <!-- 404 End -->
</template>
